<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>设备台帐</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<style type="text/css">
		 .left-label {
		 	width: 100px !important
		 }
	</style>
	<link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/layui.css"  media="all">
	<link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/toastr.min.css"  media="all">
</head>
<body>
<div class="demoTable" style="padding:10px 0 0 15px">
    <div class="layui-inline">
    	<%--<input class="layui-input" name="searchTime" id="searchTime" placeholder="请输入时间检索" style="display: inline; width: 45%">--%>
        <input class="layui-input" name="keyword" id="keyword" placeholder="请输入设备名称" autocomplete="off" style="display: inline; width: 100%">
    </div>
    <button class="layui-btn layui-btn-blue" style="margin: 0 0 0 10px" data-type="reload"><i class="layui-icon layui-icon-search">搜索</i></button>
</div>
<table class="layui-hide" id="tableList" lay-filter="tableList"></table>

<script type="text/html" id="toolbar">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-blue" lay-event="add"><i class="layui-icon layui-icon-add-1">  新增</i></button>
		<button class="layui-btn layui-btn-blue" lay-event="delete"><i class="layui-icon layui-icon-delete">批量删除</i></button>
	</div>
</script>
 
<script type="text/html" id="rowToolbar">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="${pageContext.request.contextPath }/assets/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/assets/layui.all.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/assets/js/jquery.min.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/assets/js/toastr.min.js" charset="utf-8"></script>
 
<script type="text/javascript">
	layui.use(['table','layer','upload','form','laydate'], function(){
		var table = layui.table;
		var layer = layui.layer;
		var laydate = layui.laydate;
	    var form = layui.form;
		
		var $ = layui.jquery, active = {
			reload:function () {
				/*var searchTime = $("#searchTime").val();*/
				var keyword01 = $("#keyword").val();
				/*console.log(searchTime + ',' + keyword)*/
				table.reload('contenttable',{
					method:'get',
                    where:{"keyword01":keyword01},
					page: {
						curr: 1
					}
				});
			}
		}
		$('.layui-btn').on('click', function(){
	        var type = $(this).data('type');
	        active[type] ? active[type].call(this) : '';
	    });
		
		table.render({
		    elem: '#tableList'
		    ,url:'${pageContext.request.contextPath }/deviceAccount/queryDeviceAccount.do'
		    ,toolbar: '#toolbar'
		    ,title: '设备台帐信息'
		    ,id :'contenttable'
		    ,limits:[10,20,30]
		    ,cols: [[
		      {type: 'checkbox', fixed: 'left'},
		      {field:'', title:'序号', sort: true, type:'numbers', width: 60},
		      {field:'deviceName', title:'设备名称'},
		      {field:'deviceNo', title:'设备编号'},
		      {field:'deviceVersion', title:'型号'},
		      {field:'manufacturersNo', title:'出厂编号'},
		      {field:'deviceConfig', title:'配置'},
		      {field:'deviceTotalPower', title:'设备总功率'},
		      {field:'buyTime', title:'购置日期'},
		      {field:'useTime', title:'投入使用时间'},
		      {field:'supplier', title:'供应商'},
		      {field:'location', title:'存放地点'},
		      {field:'useDept', title:'使用部门'},
		      {field:'useMan', title:'使用人'},
		      {field:'useStatus', title:'使用状态'},
		      {fixed: 'right', title:'操作', toolbar: '#rowToolbar', width: 110}
		    ]],
		    page: true
		});
	  
		//头工具栏事件
		table.on('toolbar(tableList)', function(obj){
			var checkStatus = table.checkStatus(obj.config.id);
		    switch(obj.event){
		    	case 'add':
			    	layer.open({
						type: 1 					//Page层类型
				  		,area: ['630px', '450px'] 	//宽  高
				  		,title: '新增'
				  		,shade: 0.6 				//遮罩透明度
				  		,maxmin: true 				//允许全屏最小化
				  		,anim: 1 					//0-6的动画形式，-1不开启
						,content: '<div id="addDivID">' +
									'<form class="layui-form" id="addFormID">' +
										'<table>' +
                            				'<tr style="height:20px"></tr>' +
											'<tr>' +
												'<td>&emsp;&emsp;&emsp;&emsp;设备编号&emsp;</td>' +
												'<td>' +
													'<div style="">'+
														'<div style="width: 150px; margin-left: 0px; float: left">' +
															'<select class="layui-select" id="deviceNo" name="deviceNo" lay-filter="displayInfo" lay-verify="deviceNo">' +
																'<option value="">请选择</option>' +
															'</select>' +
														'</div>' +
														'<div style="margin-top: 9px; float: left">'+
															'<font style="color:red; font-size: 24px; margin-left: 4px">*</font>'+
														'</div>'+
													'</div>' +
												'</td>' +
												'<td>&emsp;&emsp;&emsp;&emsp;设备名称&emsp;</td>' +
												'<td><input class="layui-input" readonly id="deviceName" name="deviceName" lay-verify="deviceName" style="width:150px; display:inline;">' +
													'<div class="layui-inline" style="margin-top: 4px;">'+
														'<font style="color:red; font-size: 24px; margin-left: 4px">*</font>'+
													'</div>'+
												'</td>' +
											'</tr>' +
											'<tr style="height:20px"></tr>' +
											'<tr>' +
												'<td>&emsp;&emsp;&emsp;&emsp;型号&emsp;</td>' +
												'<td><input class="layui-input" readonly id="deviceVersion" name="deviceVersion" lay-verify="deviceVersion" style="width:150px"></td>' +
												'<td>&emsp;&emsp;&emsp;&emsp;出厂编号&emsp;</td>' +
												'<td><input class="layui-input" readonly id="manufacturersNo" name="manufacturersNo" lay-verify="manufacturersNo" style="width:150px"></td>' +
											'</tr>' +
											'<tr style="height:20px"></tr>' +
											'<tr>' +
												'<td>&emsp;&emsp;&emsp;&emsp;配置&emsp;</td>' +
												'<td><input class="layui-input" readonly id="deviceConfig" name="deviceConfig" lay-verify="deviceConfig" style="width:150px"></td>' +
												'<td>&emsp;&emsp;&emsp;&emsp;设备总功率&emsp;</td>' +
												'<td><input class="layui-input" readonly id="deviceTotalPower" name="deviceTotalPower" lay-verify="deviceTotalPower" style="width:150px"></td>' +
											'</tr>' +
											'<tr style="height:20px"></tr>' +
											'<tr>' +
												'<td>&emsp;&emsp;&emsp;&emsp;购置日期&emsp;</td>' +
												'<td><input class="layui-input" id="buyTime" name="buyTime" lay-verify="buyTime" style="width:150px"></td>' +
												'<td>&emsp;&emsp;&emsp;&emsp;投入使用时间&emsp;</td>' +
												'<td><input class="layui-input"id="useTime" name="useTime" lay-verify="useTime" style="width:150px"></td>' +
											'</tr>' +
											'<tr style="height:20px"></tr>' +
											'<tr>' +
												'<td>&emsp;&emsp;&emsp;&emsp;供应商&emsp;</td>' +
												'<td><input class="layui-input" readonly id="supplier" name="supplier" lay-verify="supplier" style="width:150px"></td>' +
												'<td>&emsp;&emsp;&emsp;&emsp;存放地点&emsp;</td>' +
												'<td><input class="layui-input" id="location" name="location" lay-verify="location" style="width:150px"></td>' +
											'</tr>' +
											'<tr style="height:20px"></tr>' +
											'<tr>' +
												'<td>&emsp;&emsp;&emsp;&emsp;使用部门&emsp;</td>' +
												'<td>' +
													'<div class="layui-input-inline" style="width:150px">' +
														'<select class="layui-select" id="useDept" name="useDept" lay-verify="useDept">' +
															'<option value="">请选择</option>' +
														'</select>' +
													'</div>' +
												'</td>' +
												'<td>&emsp;&emsp;&emsp;&emsp;使用人&emsp;</td>' +
												'<td><input class="layui-input" id="useMan" name="useMan" lay-verify="useMan" style="width:150px"></td>' +
											'</tr>' +
											'<tr style="height:20px"></tr>' +
											'<tr>' +
												'<td>&emsp;&emsp;&emsp;&emsp;使用状态&emsp;</td>' +
												'<td><input class="layui-input" id="useStatus" name="useStatus" lay-verify="useStatus" style="width:150px"></td>' +
												'<td></td>' +
												'<td></td>' +
											'</tr>' +
											'<tr style="height:20px"></tr>' +
											'<tr>' +
												'<td colspan="2"><button class="layui-btn layui-btn-blue" id="subBtn" lay-submit lay-filter="addForm" style="margin-left:160px; margin-bottom: 20px">提交</button></td>' +
												'<td colspan="2">&emsp;&emsp;&emsp;&emsp;<button type="reset" class="layui-btn layui-btn-primary" style="margin-bottom: 20px">重置</button></td>' +
											'</tr>' +
										'</table>' +
									'</form>' +
                            	'</div>'
						,success: function(){
                            //购买日期
                            laydate.render({
                                elem: '#buyTime'
                            });
                            //投入使用时间
                            laydate.render({
                                elem: '#useTime'
                            });

                            //下拉框查找所有设备
                            $.ajax({
                                type: 'POST',
                                url: '${pageContext.request.contextPath}/device/queryAllDeviceList.do',
                                dataType: 'json',
                                async: false,
                                success: function (data){
                                    for (var i = 0; i < data.length; i++) {
                                        $("#deviceNo").append("<option value='"+ data[i].deviceNo +"'>"+ data[i].deviceNo +"</option>");
                                    }
                                }
                            });
                            //下拉框查找所有部门
                            $.ajax({
                                type: 'POST',
                                url: '${pageContext.request.contextPath}/device/queryAllDeptList.do',
                                dataType: 'json',
                                async: false,
                                success: function (data){
                                    for (var i = 0; i < data.length; i++) {
                                        $("#useDept").append("<option value='"+ data[i].name +"'>"+ data[i].name +"</option>");
                                    }
                                }
                            });
                            form.render();
			  			}
				});
		      	break;
                //批量删除
		    	case 'delete':
		        	var data = checkStatus.data;
		        	var idArr = new Array();
		        	if(data.length==0){
		        		toastr.warning("请至少选择一条记录！");
		        	}
		        	for(var i=0;i<data.length;i++){
                        idArr[i] = data[i].id;
		        	}
                    $.ajax({
                        type:'post',
                        url:'${pageContext.request.contextPath }/deviceAccount/deleteDeviceAccountById.do',
                        data:{"idArr" : idArr},
                        success:function(data){
                            layer.confirm('确定删除吗？', function(index){
                                if(data > 0){
                                	toastrStyle();
                                    toastr.success("删除成功！");
                                    setTimeout(function(){
                                        location.reload();
                                    },1000);
                                }else{
                                	toastrStyle();
                                    toastr.warning("删除失败！");
                                    setTimeout(function(){
                                        location.reload();
                                    },1000);
                                }
                            });
                        }
                    });
		      	break;
		      	case 'select':
		      		/*console.log(obj)*/
		      	break;
		    };
		});
	  
		//监听行工具事件
		table.on('tool(tableList)', function(obj){
			var data = obj.data;
            var idArr = new Array();
			/*console.log(obj)*/
			//单个删除
			if(obj.event === 'del'){
			  layer.confirm('确定删除吗？', function(index){
			    var id = obj.data.id;
			    idArr[0] = id;
			    $.ajax({
			    	type:'post',
			    	url:'${pageContext.request.contextPath }/deviceAccount/deleteDeviceAccountById.do',
                    data:{ "idArr" : idArr },
			    	success:function(data){
                        if(data > 0){
                            toastrStyle();
                            toastr.success("删除成功！");
                            setTimeout(function(){
                                location.reload();
                            },1000);
                        }else{
                            toastrStyle();
                            toastr.warning("删除失败！");
                            setTimeout(function(){
                                location.reload();
                            },1000);
                        }
			    	}
			    })
			    layer.close(index);
			  });
			} else if(obj.event === 'edit'){
				$("#deviceNo1").find("option").not(":first").remove();
				$("#useDept1").find("option").not(":first").remove();
				/* $("#deviceNo1").empty();
				$("#useDept1").empty(); */
				layer.open({
					  type: 1 					//Page层类型
					  ,area: ['630px', '450px']     //宽  高
					  ,title: '编辑'
					  ,shade: 0.6 				//遮罩透明度
					  ,maxmin: true 			//允许全屏最小化
					  ,anim: 1 					//0-6的动画形式，-1不开启
					  ,content: '<div id="editDivID">' +
									'<form class="layui-form" id="editFormID">' +
										'<table>' +
											'<tr>' +
												'<td><input class="layui-hide" id="id" name="id" value="'+data.id+'"></td>' +
											'</tr>' +
											'<tr>' +
												'<td><label class="layui-form-label left-label" style="margin-top:20px">设备编号</label></td>' +
												'<td>' +
													'<div style="">'+
														'<div style="width: 150px; margin-left: 0px; margin-top: 20px; float: left">' +
															'<select disabled class="layui-select" id="deviceNo1" name="deviceNo" lay-filter="displayInfo" lay-verify="deviceNo">' +
																'<option value="">请选择</option>' +
															'</select>' +
														'</div>' +
														'<div style="margin-top: 29px; float: left">'+
															'<font style="color:red; font-size: 24px; margin-left: 4px">*</font>'+
														'</div>'+
													'</div>' +
												'</td>' +
												'<td><label class="layui-form-label left-label" style="margin-top:20px">设备名称</label></td>' +
												'<td><input class="layui-input" readonly id="deviceName1" name="deviceName" value="'+data.deviceName+'" lay-verify="deviceName" style="width:150px; margin-top:20px; display:inline;">' +
													'<div class="layui-inline" style="margin-top: 4px;">'+
														'<font style="color:red; font-size: 24px; margin-left: 4px">*</font>'+
													'</div>'+
												'</td>' +
											'</tr>' +
											'<tr style="height:20px"></tr>' +
											'<tr>' +
												'<td><label class="layui-form-label left-label">型号</label></td>' +
												'<td><input class="layui-input" readonly id="deviceVersion1" name="deviceVersion" value="'+data.deviceVersion+'" lay-verify="deviceVersion" style="width:150px"></td>' +
												'<td><label class="layui-form-label left-label">出厂编号</label></td>' +
												'<td><input class="layui-input" readonly id="manufacturersNo1" name="manufacturersNo" value="'+data.manufacturersNo+'" lay-verify="manufacturersNo" style="width:150px"></td>' +
											'</tr>' +
											'<tr style="height:20px"></tr>' +
											'<tr>' +
												'<td><label class="layui-form-label left-label">配置</label></td>' +
												'<td><input class="layui-input" readonly id="deviceConfig1" name="deviceConfig" value="'+data.deviceConfig+'" lay-verify="deviceConfig" style="width:150px"></td>' +
												'<td><label class="layui-form-label left-label">设备总功率</label></td>' +
												'<td><input class="layui-input" readonly id="deviceTotalPower1" name="deviceTotalPower" value="'+data.deviceTotalPower+'" lay-verify="deviceTotalPower" style="width:150px"></td>' +
											'</tr>' +
											'<tr style="height:20px"></tr>' +
											'<tr>' +
												'<td><label class="layui-form-label left-label">购置日期</label></td>' +
												'<td><input class="layui-input" id="buyTime1" name="buyTime" value="'+data.buyTime+'" lay-verify="buyTime" style="width:150px"></td>' +
												'<td><label class="layui-form-label left-label">投入使用时间</label></td>' +
												'<td><input class="layui-input" id="useTime1" name="useTime" value="'+data.useTime+'" lay-verify="useTime" style="width:150px"></td>' +
											'</tr>' +
											'<tr style="height:20px"></tr>' +
											'<tr>' +
												'<td><label class="layui-form-label left-label">供应商</label></td>' +
												'<td><input class="layui-input" readonly id="supplier1" name="supplier" value="'+data.supplier+'" lay-verify="supplier" style="width:150px"></td>' +
												'<td><label class="layui-form-label left-label">存放地点</label></td>' +
												'<td><input class="layui-input" id="location1" name="location" value="'+data.location+'" lay-verify="location" style="width:150px"></td>' +
											'</tr>' +
											'<tr style="height:20px"></tr>' +
											'<tr>' +
												'<td><label class="layui-form-label left-label">使用部门</label></td>' +
												'<td>' +
													'<div class="layui-input-block" style="width: 150px; margin-left: 0px">' +
														'<select class="layui-select" id="useDept1" name="useDept" lay-verify="useDept">' +
															'<option value="">请选择</option>' +
														'</select>' +
													'</div>' +
												'</td>' +
												'<td><label class="layui-form-label left-label">使用人</label></td>' +
												'<td><input class="layui-input" id="useMan1" name="useMan" value="'+data.useMan+'" lay-verify="useMan" style="width:150px"></td>' +
											'</tr>' +
											'<tr style="height:20px"></tr>' +
											'<tr>' +
												'<td><label class="layui-form-label left-label">使用状态</label></td>' +
												'<td><input class="layui-input" id="useStatus1" name="useStatus" value="'+data.useStatus+'" lay-verify="useStatus" style="width:150px"></td>' +
												'<td></td>' +
												'<td></td>' +
											'</tr>' +
											'<tr style="height:20px"></tr>' +
											'<tr align="center">' +
												'<td colspan="2"><button class="layui-btn layui-btn-blue" lay-submit lay-filter="editForm" style="margin-left:160px; margin-bottom: 20px">提交</button>' +
												'<td colspan="2">&emsp;&emsp;&emsp;&emsp;<button type="reset" class="layui-btn layui-btn-primary" style="margin-bottom: 20px">重置</button>' +
											'</tr>' +
										'</table>' +
									'</form>' +
								'</div>'
				  ,success: function(){
                        //购买日期
                        laydate.render({
                            elem: '#buyTime1'
                        });
                        //投入使用时间
                        laydate.render({
                            elem: '#useTime1'
                        });
						//下拉框查找所有设备
						$.ajax({
				            type: 'POST',
				            url: '${pageContext.request.contextPath}/device/queryAllDeviceList.do',
				            dataType: 'json',
				            async: false,
				            success: function (datas){
				                for (var i = 0; i < datas.length; i++) {
				                    $("#deviceNo1").append("<option value='"+ datas[i].deviceNo +"'>"+ datas[i].deviceNo +"</option>");
				                    if(datas[i].deviceNo == data.deviceNo){
	                                    $("#deviceNo1").val(data.deviceNo);
	                                }
				                }
				            }
						});
						//下拉框查找所有部门
						$.ajax({
				            type: 'POST',
				            url: '${pageContext.request.contextPath}/device/queryAllDeptList.do',
				            dataType: 'json',
				            async: false,
				            success: function (datas){
				                for (var i = 0; i < datas.length; i++) {
				                    $("#useDept1").append("<option value='"+ datas[i].name +"'>"+ datas[i].name +"</option>");
				                    if(datas[i].name == data.useDept){
	                                    $("#useDept1").val(data.useDept);
	                                }
				                }
				            }
				        });
					form.render();
				}
			});
			}
		});

        /**
         * 通用表单提交(AJAX方式)(新增)
         */
        form.on('submit(addForm)', function (data) {
        	$("#subBtn").attr("disabled",true);
            $.ajax({
                url : '${pageContext.request.contextPath}/deviceAccount/addDeviceAccount.do',
                data: $("#addFormID").serialize(),
                cache : false,
                type : "post",
            }).done(
                function(res) {
                    if (res > 0) {
                        toastrStyle();
                        toastr.success('新增成功！');
                        setTimeout(function(){
                            location.reload();
                        },1000);
                    }
                }
            ).fail(
                function(res) {
                    toastrStyle();
                    toastr.error('新增失败！');
                    setTimeout(function(){
                        location.reload();
                    },1000);
                }
            )
            return false;
        });
        /**
         * 通用表单提交(AJAX方式)(修改)
         */
        form.on('submit(editForm)', function (data) {
            $("#deviceNo1").removeAttr("disabled");
            $.ajax({
                url : '${pageContext.request.contextPath}/deviceAccount/editDeviceAccountById.do',
                data: $("#editFormID").serialize(),
                cache : false,
                type : "post",
            }).done(
                function(res) {
                    if (res > 0) {
                        toastrStyle();
                        toastr.success('修改成功！');
                        setTimeout(function(){
                            location.reload();
                        },1000);
                    }
                }
            ).fail(
                function(res) {
                    toastrStyle();
                    toastr.error('修改失败！');
                    setTimeout(function(){
                        location.reload();
                    },1000);
                }
            )
            return false;
        });

		/**
	     * 新增表单校验
	     */
	    form.verify({
	    	//value：表单的值item：表单的DOM对象
	    	deviceName: function(value, item){
	    		if(value == ''){
	    			return '设备名称不能为空';
	    		}
	    	},
	    	deviceNo: function(value, item){
	    		if(value == ''){
	    			return '设备编号不能为空';
	    		}
	    	}
	    });
		
	  	//查找带回
        form.on('select(displayInfo)', function(data){
            //$("#deviceNo1").attr("value", data.value);
            //$('#deviceNo1').val(data.value)
            //form.render('select');
            /*alert($('#deviceNo').val());*/
        	$.ajax({
                type: 'POST',
                url: '${pageContext.request.contextPath}/device/queryDeviceInfoByNo.do',
                data: {deviceNo:$('#deviceNo').val()},
                /* dataType: 'json', */
                /* async: false, */
                success: function (data){
                	var device = eval('(' +data+ ')');
                    //设备名称
                	$('#deviceName').val(device.deviceName);
                    //设备型号
                	$('#deviceVersion').val(device.deviceVersion);
                	//出厂编号
                	$('#manufacturersNo').val(device.deviceNo);
                	//配置匹配设备基础的deviceSize
                    $('#deviceConfig').val(device.deviceSize);
                    //设备功率
                    $('#deviceTotalPower').val(device.devicePower);
                    //出厂日期
                    $('#buyTime').val(device.outTime);
                    //供应商
                    $('#supplier').val(device.manufacturers);
                }
            });

        });
	});
	toastr.options.positionClass = 'toast-top-center'; //提示框的位置设置为中上
    //提示框样式
    function toastrStyle(){
        toastr.options = {
            "closeButton": false,
            "debug": false,
            "newestOnTop": false,
            "progressBar": false,
            "positionClass": "toast-top-center",
            "preventDuplicates": false,
            "onclick": null,
            "showDuration": "5000",
            "hideDuration": "1000",
            "timeOut&quot": "100000",
            "extendedTimeOut": "0",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        };
    }
</script>

</body>
</html>